import React, { Component } from 'react';
import Header from './component/Header';
import List from './component/List'
import Footer from './component/Footer'
import './App.css'

export default class App extends Component {
    // 状态在哪里操作的方法就在哪里
  
    // 初始化
    state = {
        todos: [
            {id: "001", name: "吃饭", done: true},
            {id: "002", name: "睡觉", done: true},
            {id: "003", name: "打代码", done: false},
            {id: "004", name: "逛街", done: true},
        ]
    }

    // 用于添加一个todo数据，接收一个todo对象
    addTodo = (todoObj) => {
        // 获取原todo
        const {todos} = this.state
        // 追加一个todo
        const newTodo = [todoObj, ...todos]
        // 更新状态
        this.setState({
            todos: newTodo
        })
    }

    // 用于取消或勾选todo,更新一个对象
    updateTodo = (id, done) => {
        // 获取状态中的todos
        const {todos} = this.state
        // 加工数据
        const newTodos =  todos.map((todoObj) => {
            if (todoObj.id === id) return {...todoObj, done}
            else return todoObj
        })
        this.setState({
            todos: newTodos
        })
    }

    // 删除todo
    deleteTodo = (id) => {
        // 获取原来的todos
        const {todos} = this.state
        // 删除指定id的todo对象
        // filter函数是：带入条件，检查符合条件的生成新数组
        const newTodos = todos.filter((todoObj)=>{
			return todoObj.id !== id
		})
        // 更新状态
        this.setState({
            todos: newTodos
        })
    }

    // 用于全选
    checkAllTodo = (done) => {
        // 获取原来的todos
        const {todos} = this.state
        // 加工
        const newTodos = todos.map((todoObj) => {
            return {...todoObj, done}
        })
        // 更新状态
        this.setState({todos: newTodos})
    }

    // 清除所有已选的
    clearAllDone = () => {
        const {todos} = this.state
        const newTodos = todos.filter((todoObj)=>{
            return !todoObj.done
        })
        this.setState({
            todos: newTodos
        })
    }    

    render() {
        const {todos} = this.state
        return ( 
            <div className='todo-container'>
                <div className='todo-wrap'>
                    <Header addTodo={this.addTodo}/>   
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone} />
                </div>
            </div>
        )
  }
}
